<template>
    <el-container>
        <div class="right-panel">
            <div class="right-panel-search"
                style="width: 100%; margin-top: 5px; margin-bottom: 5px;display: flex;flex-wrap: nowrap">
                <!-- <div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">应用名称:</span>
					<el-select v-model="search.appName" placeholder="请选择应用" style="width: 150px" filterable clearable>
						<el-option v-for="(item, index) in appNameList" :key="index" :label="item.name"
							:value="item.name"></el-option>
					</el-select>
				</div> -->

                <!-- <div class="panel-search-box">
					<span class="demonstration">操作用户:</span>
					<el-input v-model="search.logModule" placeholder="请输入操作模块" style="margin-left: 10px; width: 150px"
						clearable></el-input>
				</div> -->
                <div class="panel-search-box">
                    <span class="demonstration" style="margin-left: 10px;">操作用户:</span>
                    <el-input v-model="search.user" placeholder="请输入操作人" style="margin-left: 10px; width: 180px"
                        clearable></el-input>
                </div>

                <div class="panel-search-box" style="width: 300px;">
                    <span style="margin-left: 10px;display: block;width: 100px;">请求时间:</span>
                    <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>

                <div style="display: flex;">
                    <el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
                    <el-button type="" @click="cleanSearch">清空</el-button>
                    <el-button type="primary" style="width: 100px;margin-right: 10px;"
                        @click="inveDistribution">导入</el-button>
                </div>
            </div>


        </div>
        <div class="search-box">
            <div class="panel-search-box" style="margin-bottom: 10px">
                <scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出"
                    hideButton>
                </scFileExport>
            </div>
        </div>
        <el-header style="display: none"></el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" :params="params" border stripe remoteSort remoteFilter
                @selection-change="selectionChange">
                <el-table-column label="操作用户" prop="user" align="center" min-width="150"></el-table-column>
                <el-table-column label="操作IP" prop="requestIp" align="center" min-width="150"></el-table-column>
                <el-table-column label="操作时间" prop="logTime" align="center" min-width="150"></el-table-column>
                <el-table-column label="被访问资源" prop="logModule" align="center" min-width="150"></el-table-column>
                <el-table-column label="模块名称" prop="moduleName" align="center" min-width="150"></el-table-column>
                <el-table-column label="操作类型" prop="logAction" align="center" min-width="150"></el-table-column>
            </scTable>
        </el-main>

        <scFileImport ref="scFileImport" :apiObj="importApi" :maxSize="30" hideButton @success="handleImportSuccess">
        </scFileImport>
    </el-container>
</template>

<script>
export default {
    name: 'opLog',
    data() {
        return {
            dateValue: "",
            dialog: {
                info: false
            },
            search: {},
            apiObj: this.$API.log.BoardLogList,
            params: {},
            appNameList: [
                {
                    id: 1,
                    name: '中台管理'
                },
                {
                    id: 2,
                    name: '活动赋能'
                },
                // {
                // 	id: 3,
                // 	name: '客户赋能'
                // }
                {
                    id: 3,
                    name: '员工助手'
                },
                {
                    id: 4,
                    name: '数据看板'
                }
            ],
            importApi: this.$API.log.upload,


        }
    },
    watch: {
        groupFilterText(val) {
            this.$refs.group.filter(val)
        }
    },

    mounted() { },
    async created() { },
    methods: {
        // 导入成功后
        async handleImportSuccess(res, close) {
            let filePath = await this.$API.log.importExcel.post({ data: { filePath: res.data } })
            close()
            this.$refs.table.upData()
        },
        inveDistribution() {
            this.$refs.scFileImport.open()
        },

        //任务
        downTemp() {
            // 下载模板
        },
        //编辑
        table_edit(row) {
            this.dialog.edit = true
            this.$nextTick(() => {
                this.$refs.editDialog.open('edit').setData(row)
            })
        },

        upsearch() {
            // 日期格式化
            if (this.dateValue) {
                this.search.startTime = this.newDate(this.dateValue[0])
                this.search.endTime = this.newDate(this.dateValue[1])
            }
            this.$refs.table.upData(this.search)
        },
        // 日期格式化
        newDate(dateString) {
            let date = new Date(dateString);
            let year = date.getFullYear();
            let month = ("0" + (date.getMonth() + 1)).slice(-2);
            let day = ("0" + date.getDate()).slice(-2);
            let formattedDate = `${year}-${month}-${day}`;
            return formattedDate
        },

        cleanSearch() {
            this.dateValue = ''
            this.search = {}
            this.$refs.table.reload(this.search)
        },
        //本地更新数据
        handleSuccess(data, mode) {
            if (mode === 'add') {
                data.id = new Date().getTime()
                this.$refs.table.tableData.unshift(data)
            } else if (mode === 'edit') {
                this.$refs.table.tableData
                    .filter((item) => item.id === data.id)
                    .forEach((item) => {
                        Object.assign(item, data)
                    })
            }
        }
    }
}
</script>

<style>
.header-btn-item {
    display: flex;
}
</style>
